<template>
  <div>
    <!-- 头部导航栏 -->
    <header-nav />

    <!-- 主体内容 -->
    <div class="body_nav">
      <div class="body_left">
        <div class="connection_family">
          <h1>五台山</h1>
          <router-link to="/showimg">
            <div class="img_a">
              <img src="../../public/img/首页.jpg" alt="" />
              <div class="target_href">
                <router-link to="/showimg">查看图集></router-link>
              </div>
            </div>
          </router-link>

          <div class="connerion_family_body">
            山西五台山是文殊菩萨的道场，与四川峨眉山、浙江普陀山和安徽九<br />
            华山并称为四大佛教名山，素有“金五台，银峨眉，铜普陀，铁九华”<br />
            之称；并以其悠久的历史文化和规模宏大的寺庙建筑群位居四大佛教<br />
            名山之首。五台山是坐落于“华北屋脊”之上的一系列山峰群，最高海<br />
            拔3061米；也是一个青庙黄庙共处的佛教道场，常年不断的佛事活动<br />
            将景区烘托成真正的佛国世界，每逢盛夏，海内外游人香客前来游览观<br />
            光、烧香拜佛、络绎不绝。
          </div>

          <!-- 表格部分 -->
          <div class="table_body">
            <ul class="title">
              <li>
                <div>
                  笔名：山西五台山，五台山风景区，五台山风景名胜区，五台山国家森林公园
                </div>
              </li>
            </ul>
            <ul class="table_body_left">
              <li>
                <div>官方网站</div>
                <div>
                  <a href="http://wts.sxxz.gov.cn/" target="_black">点击查看</a>
                </div>
              </li>

              <li>
                <div>开放时间：</div>
                <div>全天</div>
              </li>

              <li>
                <div>建议游玩时间：</div>
                <div>2~3天</div>
              </li>

              <li>
                <div>国家风景名胜区：</div>
                <div>1982年</div>
              </li>

              <li>
                <div>地质公园级别：</div>
                <div>国家级(2005年第四批)正名</div>
              </li>
            </ul>

            <ul class="table_body_right">
              <li>
                <div>门票参考</div>
                <div>135元</div>
              </li>
              <li>
                <div>适宜季节</div>
                <div>夏季</div>
              </li>
              <li>
                <div>旅游景区级别</div>
                <div>5A</div>
              </li>
              <li>
                <div>遗产项目编号</div>
                <div>1279(世界文化景观遗产)</div>
              </li>
              <li>
                <div>森林公园等级</div>
                <div>国家级(1992年建园)</div>
              </li>
            </ul>
          </div>
        </div>

        <!--包含景点部分  -->
        <div class="contain">
          <div class="scenic_spot">
            <span>包含景点：</span>
            <div>
              <a href="#">五台山佛光寺</a>
              <a href="#">五台山广仁寺</a>
              <a href="#">五台山菩萨顶</a>
              <a href="#">五台山罗睺寺</a>
              <a href="#">五台山善财洞</a>
              <a href="#">五台山佛观音洞</a>
              <a href="#">五台山万佛阁</a>
              <a href="#">五台山镇海寺</a>
              
              <a href="#">五台山显通寺</a>
              <a href="#">五台山塔院寺</a>
              <a href="#">五台山碧山寺</a>
              <a href="#">五台山殊像寺</a>
              <a href="#">五台山金阁寺</a>
              <a href="#">五台山南台顶普济寺</a>
              <a href="#">五台山广宗寺</a>
              <a href="#">五台黛螺顶</a>
              
              <a href="#">五台山南山寺</a>
              <a href="#">五台山龙泉寺</a>
              <a href="#">五台山白塔</a>
              <a href="#">五台山殊像寺</a>
              <a href="#">五台山五爷庙</a>
              <a href="#">五台山王海峰</a>
              <a href="#">南台锦绣峰</a>
              <a href="#">西台挂月峰</a>
              
              <a href="#">北台叶斗峰</a>
              <a href="#"></a>
            </div>
          </div>
        </div>

        <div class="directory">
          <div class="attractions-directory">
            <div class="directory-body">
              <h2>目</h2>
              <h2>录</h2>
            </div>
            <ul>
              <li>
                <h3>
                  <a href="#">
                    <span class="radius">></span>
                    1.五台山简介
                  </a>
                </h3>
              </li>
              <li><a href="">地理位置</a></li>
              <li><a href="">地址地貌</a></li>
              <li><a href="">五台山天气</a></li>
              <li><a href="">景区历史</a></li>
              <li><a href="">自然资源</a></li>
              <li><a href="">景区文化</a></li>
              <li><a href="">景区交通</a></li>
              <li>
                <h3>
                  <a href="#">
                    <span class="radius">></span>
                    2.适合游玩时间
                  </a>
                </h3>
              </li>
              <li><a href="">最佳旅游时间</a></li>
              <li><a href="">其他季节特色</a></li>
              <li>
                <h3>
                  <a href="">
                    <span class="radius">></span>
                    3.门票开放时间
                  </a>
                </h3>
              </li>
              <li><a href="">开放时间</a></li>
            </ul>
            <ul>
              <li><a href="">门票价格</a></li>
              <li>
                <h3>
                  <a href="">
                    <span class="radius">></span>
                    4.景区景点
                  </a>
                </h3>
              </li>
              <li><a href="">五台山景点地图</a></li>
              <li><a href="">塔院寺</a></li>
              <li><a href="">显通寺</a></li>
              <li><a href="">菩萨顶</a></li>
              <li><a href="">南禅寺</a></li>
              <li><a href="">佛光寺</a></li>
              <li><a href="">南山寺</a></li>
              <li><a href="">龙泉寺</a></li>
              <li><a href="">五爷庙</a></li>
              <li><a href="">黛螺顶</a></li>
              <li>
                <h3>
                  <a href="">
                    <span class="radius">></span>
                    5.旅游攻略
                  </a>
                </h3>
              </li>
            </ul>
            <ul>
              <li><a href="">推荐路线</a></li>
              <li><a href="">佛事活动</a></li>
              <li><a href="">美食推荐</a></li>
              <li><a href="">住宿推荐</a></li>
              <li><a href="">购物推荐</a></li>
              <li>
                <h3>
                  <a href="">
                    <span class="radius">></span>
                    6.使用信息
                  </a>
                </h3>
              </li>
              <li><a href="">服务设施</a></li>
              <li><a href="">游览须知</a></li>
              <li><a href="">必看贴士</a></li>
              <li><a href="">五台山自驾游注意事项</a></li>
              <li>
                <h3>
                  <a href="">
                    <span class="radius">></span>
                    7.周边旅游攻略
                  </a>
                </h3>
              </li>
              <li><a href="">周边游著名景点</a></li>
            </ul>
          </div>
        </div>

        <!-- 周边旅游攻略 -->
        <div class="round-body">
          <table>
            <tr>
              <td colspan="3">周边旅游攻略</td>
            </tr>
            <tr>
              <th>周边景色</th>
              <th>距五台山大概距离</th>
              <th>游玩时长</th>
            </tr>
            <tr>
              <td><a href="">天生桥瀑布群风景区</a></td>
              <td>3.6公里</td>
              <td>4小时</td>
            </tr>
            <tr>
              <td><a href="">佛光寺</a></td>
              <td>48.6公里</td>
              <td>3小时</td>
            </tr>
            <tr>
              <td><a href="">五岳寨风景区</a></td>
              <td>59.7公里</td>
              <td>3小时</td>
            </tr>
            <tr>
              <td><a href="">龙泉溪景区</a></td>
              <td>67.9公里</td>
              <td>3~4小时</td>
            </tr>
            <tr>
              <td><a href="">五龙池</a></td>
              <td>88.5公里</td>
              <td>5小时</td>
            </tr>
            <tr>
              <td><a href="">雁门关景区</a></td>
              <td>100公里</td>
              <td>3小时</td>
            </tr>
            <tr>
              <td><a href="">西柏坡景区</a></td>
              <td>106公里</td>
              <td>2~3小时</td>
            </tr>
            <tr>
              <td><a href="">藏山旅游景区</a></td>
              <td>139公里</td>
              <td>4小时</td>
            </tr>
          </table>
        </div>

        <!-- 美图欣赏 -->
        <div class="imgAppreciate">
          <h1>美图欣赏</h1>
          <el-carousel :interval="4000" type="card">
            <el-carousel-item>
              <img src="../../public/img/14545113148_1200x800.jpg" alt="" />
            </el-carousel-item>
            <el-carousel-item>
              <img src="../../public/img/14545129419_1200x800.jpg" alt="" />
            </el-carousel-item>
            <el-carousel-item>
              <img src="../../public/img/14545143053_1200x800.jpg" alt="" />
            </el-carousel-item>
            <el-carousel-item>
              <img src="../../public/img/14545189531_1200x800.jpg" alt="" />
            </el-carousel-item>
            <el-carousel-item>
              <img src="../../public/img/14545211662_1200x800.jpg" alt="" />
            </el-carousel-item>
            <el-carousel-item>
              <img src="../../public/img/14545268306_1200x800.jpg" alt="" />
            </el-carousel-item>
            <el-carousel-item>
              <img src="../../public/img/14545277170_1200x800.jpg" alt="" />
            </el-carousel-item>
          </el-carousel>
        </div>

        <!-- 地图坐标 -->
        <div class="mappath">
          <h1>地图坐标</h1>
          <div id="container"></div>
        </div>
      </div>

      <!-- 右侧内容 -->
      <div class="body_right">
        <right-body/>
      </div>
    </div>
  </div>
</template>

<script>
import HeaderNav from "@/components/HeaderNav.vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import RightBody from '@/components/RightBody.vue';
export default {
  components: { HeaderNav, RightBody },
  methods: {
    initMap() {
      AMapLoader.load({
        key: "5e39e7dbac23ade01bda777ec99f9bf5", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [""], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          this.map = new AMap.Map("container", {
            //设置地图容器id
            viewMode: "3D", //是否为3D地图模式
            zoom: 5, //初始化地图级别
            center: [116.397428, 39.90923], //初始化地图中心点位置
          });
        })   
    },

    mounted() {
      //DOM初始化完成进行地图初始化
      this.initMap();
    },
  },
};
</script>

<style src="../style/css/bodynav.css" scope>
</style>
<style>
</style>